<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>年度计划库</title>
		<link href="../css/layui.css" rel="stylesheet" type="text/css" />
	</head>
	<style>
		html,body{
			width:100%;
			height:100%;
			font-size: 62.5%;
			margin: 0  auto;
		}
		.yearPlan{
			width:100%;
			height:100%;
			display: flex;
			flex-direction:column;
		}
		.yearPlanTrack{
			width:100%;
			height:52%;
			display:flex;
			flex-direction:row;
			margin-bottom:1%;
		}
		.yearPlanTrackLeft{
			width:59%;
			height:100%;
			background: rgba(51,122,252,0.1);
			border-radius: 10px;
			margin-right: 1%;
		}
		
		/* 计划概要库 */
		.yearPlanTrackRight{
			width:40%;
			height:100%;
			background: rgba(51,122,252,0.1);
			border-radius: 10px;
		}
		.PlanLibrary{
			width:100%;
			height:85%;
			display: flex;
			flex-direction:row;
			padding: 1rem;
			box-sizing: border-box;
		}
		.PlanLibraryLeft{
			width: 40%;
		}
		.PlanLibraryRight{
			width: 60%;
		}
		.gaiHeader{
			width: 100%;
			height:3rem;
			display: flex;
			flex-direction: row;
		}
		.gaiBox{
			width:80%;
			height:2.2rem;
			line-height:2.2rem;
			background-image:url(../images/taskPlan/bgimage.png);
			background-size: 100%  100%;
			background-repeat: no-repeat;
		}
		.gaiBox>i{
			width:1rem;
			height:1rem;
			display: inline-block;
			background-image:url(../images/taskPlan/task.png);
			background-size: 100%  100%;
			background-repeat: no-repeat;
			margin-left:1rem;
		}
		.gaiBox span{
			font-size:1.2rem;
			color: #fff;
			margin-left:0.5rem;
		}
		.boxList{
			width:100%;
			height:90%;
			display: flex;
			flex-direction:column;
			padding-left: 1rem;
			box-sizing: border-box;
		}
		.boxList>div{
			width:100%;
			height:30%;
            border-radius:1rem;
			margin-top: 1rem;
			display: flex;
			flex-direction: row;
		}
		.blue_box{	
            background: linear-gradient(0deg, #0336FF, #01B4FF);
		}
		.green_box{		
            background: linear-gradient(0deg, #00908E, #33FF99);
		}
		.zise_box{	
            background: linear-gradient(0deg, #5900BC, #9F4EFB);
		}
		.blueIcon{
			width: 20%;
			text-align: center;
			margin-top: 12%;
		}
		.blueIcon i{
			width:2rem;
			height:2rem;
			display: inline-block;
			background-image:url(../images/taskPlan/task.png);
			background-size: 100%  100%;
			background-repeat: no-repeat;
		    vertical-align: middle; 
		}
		.blueTxt{
			width: 80%;
			margin-top: 6%;
			/* display: flex; */
			/* flex-direction:column; */
			
		}
		.blueTxt div:first-child{
			color: #FFFC00;
			font-size: 2rem;
		}
		
		.blueTxt div:last-child{
			color: #fff;
			font-size: 1.5rem;
		}
		.sp_bgColor{
			color: #fff;
			font-size: 1rem;
		}
		.PlanWrap{
			width: 100%;
			height: 93%;
			/* border: 1px  solid red; */
		}
		#echartList{
			width: 100%;
			height:100%;
		}
		.taskType .layui-input, .layui-select, .layui-textarea {
		    height: 22px;
		    background-color:#337AFC;
		    border-radius: 3px;
			color: #fff;
			border: 1px solid #5377ED;
		}
		
		
		
		
		.yearPlanOver{
			width:100%;
			height:47%;
			background: rgba(51,122,252,0.1);
			border-radius: 10px;
		}
		.PlanTrackHeader,
		.PlanRightBox,
		.OverHeader{
			width:100%;
			height: 5rem;
			line-height:5rem;
			background:#0350DB;
		    border-radius: 10px 10px 0px 0px;
			color:#fff;
			text-align: center;
			font-size:2rem;
		}
		.planCont{
			width:100%;
			height:85%;
			display: flex;
			flex-direction: row;
		}
		.planContLeft{
			width:40%;
			height:100%;
		}
		.planContTitle{
			width:100%;
			height:4.5rem;
			line-height:4.5rem;
			padding:  1rem  5rem  1rem  1rem;
			box-sizing: border-box;
		}
		.plan_gs{
			width:100%;
			height:2.5rem;
			line-height:2.5rem;
			background-image:url(../images/taskPlan/bgimage.png);
		    background-size: 100%  100%;
			background-repeat: no-repeat;
			padding-left:1rem;
		}
		.plan_gsImage{
			width:1rem;
			height:1rem;
			display: inline-block;
			background-image:url(../images/taskPlan/task.png);
			background-size: 100%  100%;
			background-repeat: no-repeat;
		} 
		.plan_gs>span{
			margin-left:0.5rem;
			color: #fff;
			font-size:1.2rem;
		}
		.echartDiv{
			width:100%;
			height:85%;
		}
		#echartBox{
			width:100%;
			height:100%;
		}
		.planContRight{
			width:60%;
			height:100%;
			padding-right:1.5rem;
			box-sizing: border-box;
		}
		.plan_tab{
			width:100%;
			height:85%;
			
		}
	    .plan_tab .layui-table-view{
			color:#fff;
		}
		
		
		/*年度计划项目总览 */
		.OverDiv{
			width:100%;
			height:6rem;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 1rem;
			box-sizing: border-box;
		}
		.OverDivTitle{
			width:80%;
			height:3rem;
		}
		.searchDiv{
			width:20%;
			height:3rem;
			display:flex;
			flex-direction:row;
		}
		.OverDivBox{
			width:50%;
			height:3rem;
			line-height:3rem;
			background-image:url(../images/taskPlan/bgimage.png);
			background-size: 100%  100%;
			background-repeat: no-repeat;
			padding-left:1rem;	
		}
		.OverDivBoxIcon{
			width:1rem;
			height:1rem;
			display: inline-block;
			background-image:url(../images/taskPlan/task.png);
			background-size: 100%  100%;
			background-repeat: no-repeat;
		}
		.OverDivBox>span{
			color: #fff;
			font-size:1.4rem;
		}
		.planItemSearch{
		   width: 4rem;
		   height: 3rem;
		   background: #1749EC;
		   border-radius: 0px 5px 5px 0px;
		}
		.planItemSearchBtn{
			width: 2rem;
			height:2rem;
			background-image: url(../images/firstHeadToolSearchBtn.png);
			background-size: 100% 100%;
			border: 0;
			border-width: 0px !important;
			background-color: #fff0 !important;
			margin-top: 0.5rem;
			cursor: pointer;
		}
		.searchDiv div:first-child{
			width:100%;
		}
		.searchDiv .layui-input, .layui-select, .layui-textarea {
		    height:3rem;
		    line-height: 3rem;
		    border-width: 1px;
		    border-style: solid;
			border-color:#0D44A9; 
		    background-color:#0A3269;
		    border-radius: 5px;
		    box-shadow: 0px 0px 10px 0px #0D44A9 inset;
			color: #fff;
		}
		input::-webkit-input-placeholder{
			color: #84B0F9;
			font-size: 12px;
			padding: 0 5px;
			box-sizing: border-box;
			/* vertical-align: middle; */
		}
		input::-moz-placeholder{   /* Mozilla Firefox 19+ */
			color: #84B0F9;
		}
		input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
			color: #84B0F9;
		}
		input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
			color: #84B0F9;
		}
		
		.planTabBox{
			width:100%;
			height:64%;
			/* overflow: auto; */
			/* border: 1px  solid  red; */
			padding:0 1rem;
			box-sizing: border-box;
		}
		.spBtn{
			width:6rem;
			height:2.5rem;
			line-height:2.5rem;
			color: #fff;
            display: inline-block;
			text-align: center;
			background: linear-gradient(0deg, #0336FF, #01B4FF);
			border-radius: 6px;
		}
		.layui-table-view{
			border-width:0 !important;
		}
		.layui-table tbody tr:hover,
		.layui-table thead tr, 
		.layui-table-click, 
		.layui-table-header, 
		.layui-table-hover, 
		.layui-table-mend,
		.layui-table-patch,
		.layui-table-tool,
		.layui-table-total,
		.layui-table-total tr,
		.layui-table[lay-even] tr:nth-child(even){
			background-color:#225298 !important;
			border: 0;
		}
		
		.layui-table-body   .popper__arrow{
		  display:none;
		}
		.layui-table-body::-webkit-scrollbar{
		  width: 8px;
		  background-color:#0A3269;
		}
		
		.layui-table-body::-webkit-scrollbar-track {
		  background-color:#0A3269;
		}
		
		.layui-table-body::-webkit-scrollbar-thumb  {
		  background:#1B44B3;
		  border-radius: 10px;
		}
		
	 .layui-table-cell{
		   height:auto;
		   overflow:visible;
		   text-overflow:inherit;
		   white-space:normal;
		}
		
	</style>
	<body>
		<div class="yearPlan">
			<div class="yearPlanTrack">
				<div class="yearPlanTrackLeft">
					<div class="PlanTrackHeader">
						<span>年度计划项目追踪</span>
					</div>
					<div class="planCont">
						<div  class="planContLeft">
							<div class="planContTitle">
								<div class="plan_gs">
									<i class="plan_gsImage"></i>
									<span>概览</span>
								</div>
							</div>
							<div  class="echartDiv">
								<div id="echartBox"></div>
							</div>
						</div>
						<div  class="planContRight">
							<div class="planContTitle">
								<div class="plan_gs">
									<i class="plan_gsImage"></i>
									<span>审批流程追踪</span>
								</div>
							</div>
							<div class="plan_tab">
								<div id="tabBox"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="yearPlanTrackRight">
					<div class="PlanRightBox">
						<span>年度计划库概览</span>
					</div>
					<div  class="PlanLibrary">
						<div  class="PlanLibraryLeft">
							<div class="gaiHeader">
								<div class="gaiBox">
									<i></i>
									<span>概要</span>
								</div>
								
							</div>
							
							<div class="boxList">
								<div class="blue_box">
									<div class="blueIcon">
										<i></i>
									</div>
									<div class="blueTxt">
										<div>18<span class="sp_bgColor">个</span></div>
										<div>年度申报项目数</div>
									</div>
								</div>
								<div class="green_box">
									<div class="blueIcon">
										<i></i>
									</div>
									<div class="blueTxt">
										<div>2<span class="sp_bgColor">个</span></div>
										<div>专项申报数</div>
									</div>
								</div>
								<div class="zise_box">
									<div class="blueIcon">
										<i></i>
									</div>
									<div class="blueTxt">
										<div>1500<span class="sp_bgColor">万</span></div>
										<div>申报投资数</div>
									</div>
								</div>
							</div>
						</div>
						<div  class="PlanLibraryRight">
							<div class="gaiHeader">
								<div class="gaiBox">
									<i></i>
									<span>项目组成</span>
								</div>
								<div class="taskType">
									 <form class="layui-form">
										<select>
										   <option>项目类型</option>
										</select>
									</form>
								</div>
							</div>
							<div class="PlanWrap">
								<div id="echartList"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div  class="yearPlanOver">
				<div class="OverHeader">
					<span>年度计划项目总览</span>
				</div>
				<div class="OverDiv">
					<div class="OverDivTitle">
						<div class="OverDivBox">
							<i class="OverDivBoxIcon"></i>
							<span>规划项目列表</span>
						</div>
					</div>	
					<div class="searchDiv">
						<div><input  type="text"  class="layui-input" value=""  data-idx=""  autocomplete="off"  placeholder="请输入项目名称"  /></div>
						<div class = "planItemSearch" align="center">
							<button  type="button" id = "proSearchBtn" class="planItemSearchBtn" ></button>
						</div>
					</div>
				</div>	
				<div class="planTabBox">
					<div id="planOverTab"></div>
				</div>
			</div>
		</div>
	</body>
	<script src="./../layui.js"></script>
	<script src="./../echarts/echarts.min.js"></script>
	<script src="./../index.js"></script>
	<script>
		layui.config({
		    base: ''
		});
		layui.use(['layer','form','element','laydate','tree','table'], function () {//,'element'
		    var layer = layui.layer
		        , element = layui.element
		        ,form = layui.form
		        , $ = layui.$
		        ,laydate = layui.laydate
				,tree = layui.tree
				,table = layui.table
				
		   var  tabData = [
			   {
				   id:1,
				   name:"上海市轨道交通2号线 信号新增CBTC...项目",
				   status:0,
				   sp:"审批部门",
				   time:"30"
			   },
			   {
				   id:2,
				   name:"上海市轨道交通2号线 信号新增CBTC...项目",
				   status:0,
				   sp:"审批部门",
				   time:"30"
			   },
			   {
				   id:3,
				   name:"上海市轨道交通2号线 信号新增CBTC...项目",
				   status:0,
				   sp:"审批部门",
				   time:"30"
			   }
		   ]
		   
		  
		   
		   
		    table.render({
		      elem: '#tabBox',
			  data:tabData,
			  skin:'nob',
			  height:"250",
			  loading: true,
		      // url:'/demo/table/user/',
		      // cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		     cols: [[
		       {field:'name', width:"35%", title: '项目名称'},
		       {field:'status', width:"20%", title: '状态',
			    templet: function(d){
					  var  str;
					  if(d.status == 0){
						  str  = '<span  style="color:#FFD308">审批中</span>'
					  }else if(d.status == 1){
						  str  = '<span  style="color:#E93A3A">未入库</span>'
					  }else if(d.status == 2){
						  str  = '<span style="color:#03DB54">已入库</span>'
					  }			  
					return str;
			    }
			   },
		       {field:'sp', width:"25%", title: '审批部门'},
		       {field:'time', width:"20%", title: '流转天数'},
		     ]],
			 done: function (res, curr, count) {
			 var  that = this.elem.next();
				   $('th').css({'background-color': '#225298', 'color':'#77FFFF','font-weight':'bold','height':'45','line-height':"45"});
				  res.data.forEach(function(item,index){
					  if(index%2 == 0){
						  var  tr = that.find(".layui-table-box tbody tr[data-index='"+index+"']").css({"background":"#0E3B80","color":"#fff"});
						  
					  }else{
						  var  tr = that.find(".layui-table-box tbody tr[data-index='"+index+"']").css({"background":"#154B88","color":"#fff"}); 
					  }
				  })
			 }
		    });	
			
			
			var  planTabData = [
				   {
					   id:1,
					   name:"上海市轨道交通2号线信号新增 CBTC系统工程项目",
					   status:0,
					   year:"2020",
					   taskType:"大修",
					   contain:"",
					   money:187124.10
				   },
				   {
					   id:2,
					   name:"20220年度通号公司2号线集中 改造项目",
					   status:0,
					   year:"2020",
					   taskType:"更新改造",
					   contain:"",
					   money:187124.10
				   },
				   {
					   id:3,
					   name:"20220年度通号公司2号线集中 改造项目",
					   status:1,
					   year:"2020",
					   taskType:"更新改造",
					   contain:"",
					   money:187124.10
				   },
				   {
					   id:4,
					   name:"20220年度通号公司2号线集中 改造项目",
					   status:2,
					   year:"2020",
					   taskType:"更新改造",
					   contain:"",
					   money:187124.10
				   },
				   {
					   id:5,
					   name:"20220年度通号公司2号线集中 改造项目",
					   status:2,
					   year:"2020",
					   taskType:"更新改造",
					   contain:"",
					   money:187124.10
				   }
			]
			
			
			table.render({
			  elem: '#planOverTab',
			  data:planTabData,
			  skin:'nob',
			  // even:true,
			  height:"190",
			  loading: true,
			  // url:'/demo/table/user/',
			  // cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			  cols: [[
			    {field:'name', width:'50%', align:'left',title: '规划名称'},
			    {field:'status', width:'10%',align:'center', title: '状态',
				  templet: function(d){
					  var  str;
					  if(d.status == 0){
						  str  = '<span  style="color:#FFD308">审批中</span>'
					  }else if(d.status == 1){
						  str  = '<span  style="color:#E93A3A">未入库</span>'
					  }else if(d.status == 2){
						  str  = '<span style="color:#03DB54">已入库</span>'
					  }
					  
				  		return str;
				  }
				},
			    {field:'year', width:'10%',align:'center', title: '申报年度'},
			    {field:'taskType', width:'10%',align:'center', title: '项目类型'},
				{field:'contain', width:'10%',align:'center', title: '包含需求',
				   templet: function(d){
						return '<span  class="spBtn">详情</span>'
				   }
				},
				{field:'money', width:'10%',align:'center', title: '申报资金'},
			  ]],
			  done: function (res, curr, count) {
		      var  that = this.elem.next();
				   $('th').css({'background-color': '#225298', 'color':'#77FFFF','font-weight':'bold'});
				  res.data.forEach(function(item,index){
					  if(index%2 == 0){
						  var  tr = that.find(".layui-table-box tbody tr[data-index='"+index+"']").css({"background":"#0E3B80","color":"#fff"});
						  
					  }else{
						  var  tr = that.find(".layui-table-box tbody tr[data-index='"+index+"']").css({"background":"#154B88","color":"#fff"}); 
					  }
				  })
			  }
			});	
			
			
				
		  var  option = {
		        tooltip: {
		            trigger: 'item',
		            formatter: '{a} <br/>{b}: {c} ({d}%)'
		        },
				title: {
					text:20+"个\n计划提交\n总数",
					top: '40%',	
					left: '29%',
					textAlign: 'center',
					
					textStyle: {
						fontSize:14,
						color:"#fff",
						rich: {
							value: {
								color: '#08A7E9',
								fontSize: 26,
								lineHeight: 24,
							},
							name: {
								color: '#08A7E9',
								fontSize: 16,
								lineHeight: 35,
							},
						},
					},
				},
				legend:[
					
					{
					   orient: 'vertical',
					   right:"22%",
					   top:"20%",
				       itemWidth:12,
				       itemHeight:12,
				       textStyle: {color: '#fff',fontSize:'12'},
				       data:[{name:'已入库',icon:'roundRect'}],   //rect为矩形
				   },{
					   orient: 'vertical',
					   right:"22%",
					   top:"40%",
				       itemWidth:12,
				       itemHeight:12,
				       textStyle: {color: '#fff',fontSize:'12'},
				       data:[{name:'审批中',icon:'roundRect'}],   //rect为矩形
				   },{
					   orient: 'vertical',
					   right:"22%",
					   top:"60%",
				       itemWidth:12,
				       itemHeight:12,
				       textStyle: {color: '#fff',fontSize:'12'},
				       data:[{name:'未通过',icon:'roundRect'}]   //rect为矩形
				   },
				   ],
		        series: [
		            {
		                name: '访问来源',
		                type: 'pie',
		                radius: ['40%', '50%'],
		                avoidLabelOverlap: false,
						left:"-40%",
		                label: {
		                    show: false,
		                    position: 'center'
		                },
		                // emphasis: {
		                //     label: {
		                //         show: true,
		                //         fontSize: '18',
		                //         fontWeight: 'bold'
		                //     }
		                // },
		                labelLine: {
		                    show: false
		                },
		                data: [
		                    {value: 35, name: '已入库'},
		                    {value: 9, name: '审批中'},
		                    {value: 6, name: '未通过'},
		                ],
						itemStyle:{
							normal: {
								color:function(params) {
									//自定义颜色
									var colorList = [
										'#77FFFF', '#FFD308', '#E93A3A',
									];
									return colorList[params.dataIndex]
								}
							}
						}
		            }
		        ]
		    };
			var myChart = echarts.init(document.getElementById("echartBox"));
			myChart.setOption(option);	
			
			
			
			
			
			
			
			
			var  option = {
			      tooltip: {
			          trigger: 'item',
			          formatter: '{a} <br/>{b}: {c} ({d}%)'
			      },
							title: {
								text:"",
								top: '40%',	
								left: '29%',
								textAlign: 'center',
								
								textStyle: {
									fontSize:14,
									color:"#fff",
									rich: {
										value: {
											color: '#08A7E9',
											fontSize: 26,
											lineHeight: 24,
										},
										name: {
											color: '#08A7E9',
											fontSize: 16,
											lineHeight: 35,
										},
									},
								},
							},
							legend:[

								{
								   orient: 'vertical',
								   right:"22%",
								   top:"20%",
							       itemWidth:12,
							       itemHeight:12,
							       textStyle: {color: '#fff',fontSize:'12'},
							       data:[{name:'车辆',icon:'roundRect'}],   //rect为矩形
							   },{
								   orient: 'vertical',
								   right:"22%",
								   top:"35%",
							       itemWidth:12,
							       itemHeight:12,
							       textStyle: {color: '#fff',fontSize:'12'},
							       data:[{name:'供电',icon:'roundRect'}],   //rect为矩形
							   },{
								   orient: 'vertical',
								   right:"22%",
								   top:"50%",
							       itemWidth:12,
							       itemHeight:12,
							       textStyle: {color: '#fff',fontSize:'12'},
							       data:[{name:'通号',icon:'roundRect'}]   //rect为矩形
							   },
							   {
								   orient: 'vertical',
								   right:"22%",
								   top:"65%",
							       itemWidth:12,
							       itemHeight:12,
							       textStyle: {color: '#fff',fontSize:'12'},
							       data:[{name:'工务',icon:'roundRect'}]   //rect为矩形
							   },
							   {
								   orient: 'vertical',
								   right:"22%",
								   top:"80%",
							       itemWidth:12,
							       itemHeight:12,
							       textStyle: {color: '#fff',fontSize:'12'},
							       data:[{name:'物后',icon:'roundRect'}]   //rect为矩形
							   },
							   ],
			      series: [
			          {
			              name: '',
			              type: 'pie',
			              radius: ['30%', '50%'],
			              avoidLabelOverlap: false,
									left:"-40%",
			              label: {
			                  show: false,
			                  position: 'center'
			              },
			              // emphasis: {
			              //     label: {
			              //         show: true,
			              //         fontSize: '18',
			              //         fontWeight: 'bold'
			              //     }
			              // },
			              labelLine: {
			                  show: false
			              },
			              data: [
			                  {value: 6, name: '车辆'},
			                  {value: 6, name: '供电'},
			                  {value: 10, name: '通号'},
							  {value: 6, name: '工务'},
							  {value: 5, name: '物后'},
			              ],
									itemStyle:{
										normal: {
											color:function(params) {
												//自定义颜色
												var colorList = [
													'#0ECEFF', '#0566E8', '#F25C5D','#F3961C','#907AFF',
												];
												return colorList[params.dataIndex]
											}
										}
									}
			          }
			      ]
			  };
			var myChart = echarts.init(document.getElementById("echartList"));
			myChart.setOption(option);	

			
			
			
			
			
			
				
		});
		
	</script>
</html>
